{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>日期选择</li>
  </ol>
<section id="pageBody" class="demo-section">
<div id="pageContent">


<article>
    <p>日期选择插件可以帮助用户更方便准确的选择日期和时间。</p>
    <p>在ZUI中包含的日期选择控件基于开源项目 <a href="http://www.malot.fr/bootstrap-datetimepicker/">DateTime Picker</a> 定制开发。</p>
</article>


<section>
    <header><h3>用法和示例</h3></header>
    <article>
        <p>日期选择插件为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源：</p>
        <pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"lib/datetimepicker/datetimepicker.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">&gt;</span>
            <span class="pln"></span><span class="tag">&lt;script</span><span class="pln"> </span>
            <span class="atn">src</span><span class="pun">=</span><span class="atv">"lib/datetimepicker/datetimepicker.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><p>你需要手动在 <code>&lt;input&gt;</code> 元素上调用初始化函数，并通过配置来定制日期选择范围和格式。所有可用的配置你可以访问 <a href="http://www.malot.fr/bootstrap-datetimepicker/">DateTime Picker</a> 官网获得帮助。</p><h4>日期选择</h4><div class="example">
  <input type="text" class="form-control form-date" placeholder="选择或者输入一个日期：yyyy-MM-dd">
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control form-date"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"选择或者输入一个日期：yyyy-MM-dd"</span><span class="tag">&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 仅选择日期</span><span class="pln">
$</span><span class="pun">(</span><span class="str">".form-date"</span><span class="pun">).</span><span class="pln">datetimepicker</span><span class="pun">(</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
    language</span><span class="pun">:</span><span class="pln">  </span><span class="str">"zh-CN"</span><span class="pun">,</span><span class="pln">
    weekStart</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayBtn</span><span class="pun">:</span><span class="pln">  </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    autoclose</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayHighlight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    startView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln">
    minView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln">
    forceParse</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
    format</span><span class="pun">:</span><span class="pln"> </span><span class="str">"yyyy-mm-dd"</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>时间选择</h4><div class="example">
  <input type="text" class="form-control form-time" placeholder="选择或者输入一个时间：hh:mm">
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control form-time"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"选择或者输入一个时间：hh:mm"</span><span class="tag">&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 选择时间</span><span class="pln">
$</span><span class="pun">(</span><span class="str">".form-time"</span><span class="pun">).</span><span class="pln">datetimepicker</span><span class="pun">({</span><span class="pln">
    language</span><span class="pun">:</span><span class="pln">  </span><span class="str">"zh-CN"</span><span class="pun">,</span><span class="pln">
    weekStart</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayBtn</span><span class="pun">:</span><span class="pln">  </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    autoclose</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayHighlight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    startView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    minView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
    maxView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    forceParse</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
    format</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hh:ii'</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>日期+时间选择</h4><div class="example">
  <input type="text" class="form-control form-datetime" placeholder="选择或者输入一个日期+时间：yyyy-MM-dd hh:mm">
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control form-datetime"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"选择或者输入一个日期+时间：yyyy-MM-dd hh:mm"</span><span class="tag">&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 选择时间和日期</span><span class="pln">
$</span><span class="pun">(</span><span class="str">".form-datetime"</span><span class="pun">).</span><span class="pln">datetimepicker</span><span class="pun">(</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
    weekStart</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayBtn</span><span class="pun">:</span><span class="pln">  </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    autoclose</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayHighlight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    startView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln">
    forceParse</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
    showMeridian</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    format</span><span class="pun">:</span><span class="pln"> </span><span class="str">"yyyy-mm-dd hh:ii"</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>






<section><header><h3>禁用输入</h3></header><article><p>只允许用户选择一个日期或时间，而不允许自行编辑日期，只需要给 <code>input</code> 加上 <code>readonly</code> 属性。</p><div class="example">
  <div class="row">
    <div class="col-md-4"><input type="text" class="form-control form-date" placeholder="选择或者输入一个日期：yyyy-MM-dd" readonly="readonly"></div>
    <div class="col-md-4"><input type="text" class="form-control form-time" placeholder="选择或者输入一个时间：hh:mm" readonly="readonly"></div>
    <div class="col-md-4"><input type="text" class="form-control form-datetime" placeholder="选择或者输入一个日期+时间：yyyy-MM-dd hh:mm" readonly="readonly"></div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control form-date"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"选择或者输入一个日期：yyyy-MM-dd"</span><span class="pln"> </span><span class="atn">readonly</span><span class="pun">=</span><span class="atv">"readonly"</span><span class="tag">&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control form-time"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"选择或者输入一个时间：hh:mm"</span><span class="pln"> </span><span class="atn">readonly</span><span class="pun">=</span><span class="atv">"readonly"</span><span class="tag">&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control form-datetime"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"选择或者输入一个日期+时间：yyyy-MM-dd hh:mm"</span><span class="pln"> </span><span class="atn">readonly</span><span class="pun">=</span><span class="atv">"readonly"</span><span class="tag">&gt;</span></code></pre></article></section>

<script>
function onPageClose() {
    if($.fn.datetimepicker) $('#pageBody').find('.form-date,.form-datetime,.form-time').datetimepicker('remove');
}
function onPageLoad() {
    onPageClose();
}
$(function(){
    afterPageLoad();
});
function afterPageLoad() {
    $.getScript('__ZUI__/lib/datetimepicker/datetimepicker.min.js', function() {
        if($.fn.datetimepicker) {
            $('#pageBody .form-datetime').datetimepicker({
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
                format: 'yyyy-mm-dd hh:ii'
            });
            $('#pageBody .form-date').datetimepicker({
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
                format: 'yyyy-mm-dd'
            });
            $('#pageBody .form-time').datetimepicker({
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 1,
                minView: 0,
                maxView: 1,
                forceParse: 0,
                format: 'hh:ii'
            });
        }
    });
}
</script><section><header><h3>使用输入框组</h3></header><article><p>输入框组可以添加额外的按钮来操作日期选择插件。</p><p>按钮中的<code>.icon-remove</code>用来移除输入的日期。<code>.icon-th</code>,<code>.icon-calendar</code>,<code>.icon-time</code>用来激活日期选择框。</p><div class="example">
  <div class="row">
    <div class="col-md-4">
      <div class="input-group date form-datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
        <input class="form-control" size="16" type="text" value="" readonly="">
        <span class="input-group-addon"><span class="icon-remove"></span></span>
        <span class="input-group-addon"><span class="icon-th"></span></span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="input-group date form-date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
        <input class="form-control" size="16" type="text" value="" readonly="">
        <span class="input-group-addon"><span class="icon-remove"></span></span>
        <span class="input-group-addon"><span class="icon-calendar"></span></span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="input-group date form-time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
        <input class="form-control" size="16" type="text" value="" readonly="">
        <span class="input-group-addon"><span class="icon-remove"></span></span>
        <span class="input-group-addon"><span class="icon-time"></span></span>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group date form-datetime"</span><span class="pln"> </span><span class="atn">data-date</span><span class="pun">=</span><span class="atv">"1979-09-16T05:25:07Z"</span><span class="pln"> </span><span class="atn">data-date-format</span><span class="pun">=</span><span class="atv">"dd MM yyyy - HH:ii p"</span><span class="pln"> </span><span class="atn">data-link-field</span><span class="pun">=</span><span class="atv">"dtp_input1"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"16"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">readonly</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon"</span><span class="tag">&gt;&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-remove"</span><span class="tag">&gt;&lt;/span&gt;&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon"</span><span class="tag">&gt;&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-th"</span><span class="tag">&gt;&lt;/span&gt;&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 选择时间和日期</span><span class="pln">
$</span><span class="pun">(</span><span class="str">".form-datetime"</span><span class="pun">).</span><span class="pln">datetimepicker</span><span class="pun">(</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
    weekStart</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayBtn</span><span class="pun">:</span><span class="pln">  </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    autoclose</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayHighlight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    startView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln">
    forceParse</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
    showMeridian</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    format</span><span class="pun">:</span><span class="pln"> </span><span class="str">"yyyy-mm-dd hh:ii"</span><span class="pln">
</span><span class="pun">});</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group date form-date"</span><span class="pln"> </span><span class="atn">data-date</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">data-date-format</span><span class="pun">=</span><span class="atv">"dd MM yyyy"</span><span class="pln"> </span><span class="atn">data-link-field</span><span class="pun">=</span><span class="atv">"dtp_input2"</span><span class="pln"> </span><span class="atn">data-link-format</span><span class="pun">=</span><span class="atv">"yyyy-mm-dd"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"16"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">readonly</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon"</span><span class="tag">&gt;&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-remove"</span><span class="tag">&gt;&lt;/span&gt;&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon"</span><span class="tag">&gt;&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-calendar"</span><span class="tag">&gt;&lt;/span&gt;&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 仅选择日期</span><span class="pln">
$</span><span class="pun">(</span><span class="str">".form-date"</span><span class="pun">).</span><span class="pln">datetimepicker</span><span class="pun">(</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
    language</span><span class="pun">:</span><span class="pln">  </span><span class="str">"zh-CN"</span><span class="pun">,</span><span class="pln">
    weekStart</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayBtn</span><span class="pun">:</span><span class="pln">  </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    autoclose</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayHighlight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    startView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln">
    minView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln">
    forceParse</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
    format</span><span class="pun">:</span><span class="pln"> </span><span class="str">"yyyy-mm-dd"</span><span class="pln">
</span><span class="pun">});</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group date form-time"</span><span class="pln"> </span><span class="atn">data-date</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">data-date-format</span><span class="pun">=</span><span class="atv">"hh:ii"</span><span class="pln"> </span><span class="atn">data-link-field</span><span class="pun">=</span><span class="atv">"dtp_input3"</span><span class="pln"> </span><span class="atn">data-link-format</span><span class="pun">=</span><span class="atv">"hh:ii"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"16"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">readonly</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon"</span><span class="tag">&gt;&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-remove"</span><span class="tag">&gt;&lt;/span&gt;&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon"</span><span class="tag">&gt;&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-time"</span><span class="tag">&gt;&lt;/span&gt;&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 选择时间</span><span class="pln">
$</span><span class="pun">(</span><span class="str">".form-time"</span><span class="pun">).</span><span class="pln">datetimepicker</span><span class="pun">({</span><span class="pln">
    language</span><span class="pun">:</span><span class="pln">  </span><span class="str">"zh-CN"</span><span class="pun">,</span><span class="pln">
    weekStart</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayBtn</span><span class="pun">:</span><span class="pln">  </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    autoclose</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    todayHighlight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    startView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    minView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
    maxView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    forceParse</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">
    format</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hh:ii'</span><span class="pln">
</span><span class="pun">});</span></code></pre><p>
    <link rel="stylesheet" href="__ZUI__/lib/datetimepicker/datetimepicker.min.css"></p></article></section></div>
</section>
{/block}